<template>
  <div class="infinite-container">
    <!-- topBg -->
    <div class="topBg">
      <div class="ostatus" v-if="doctor.online">在线</div>
      <div class="flex pt10 flex_vcenter color-lightgreen">
        <div>
          <img v-lazy="doctor.headerUrl" class="doctor-image" />
        </div>
        <div class="flex_full">
          <div>
            <span class="docName">{{doctor.doctorName||""}}</span>
            <span>{{doctor.doctorTitle}}</span>
          </div>
          <div class="mt5">
            <span>{{doctor.orgName || '-'}}</span>
            <span>{{doctor.departmentName}}</span>
          </div>
          <div class="mt5">
            <span class="borderBtn" v-if="doctor.imageAbleFlag && doctor.imageAbleFlag == 1">咨询</span>
            <span class="borderBtn" v-if="doctor.returnVisitFlag && doctor.returnVisitFlag == 1">处方</span>
            <span class="borderBtn" v-if="doctor.telephoneFlag && doctor.telephoneFlag == 1">电话</span>
            <span class="borderBtn" v-if="doctor.videoFlag && doctor.videoFlag == 1">视频</span>
          </div>
        </div>
        <div class="flex flex_vcenter collect_wrap">
          <div class="flex flex_vcenter" v-if="doctor.doctorCollect == 1" @click="collectDoctor">
            <img src="../../assets/images/icon_collected.png" alt class="v-middle" />已收藏
          </div>
          <div class="flex flex_vcenter" v-else @click="collectDoctor">
            <img src="../../assets/images/icon_collecte.png" alt class="v-middle" />收藏
          </div>
        </div>
      </div>

      <div class="text-gray flex rateInfo flex_vcenter">
        <div>
          <span>接诊量</span>
          <b class="f20">{{doctor.visitingVolume}}</b>
        </div>
        <div style="width: 1px; height: 12px;background-color: #D2FBEB;margin: 0 10px;"></div>
        <div>
          <span>评分</span>
          <b class="f20" v-if="doctor.score">{{doctor.score | fixedMoneyClean(1)}}</b>
          <b class="f20" v-else>10.0</b>
        </div>
      </div>
    </div>

    <div class="topIconBox">
      <div class="flex flex_vcenter" @click="showActions(1)">
        <i
          class="w-icon w-icon-icon_zxzx"
          :class="{'gray-filter': doctor.imageAbleFlag == 0 && doctor.telephoneFlag==0&&doctor.videoFlag==0}"
        ></i>
        <!-- <i class="w-icon w-icon-icon_zxzx gray-filter"></i> -->
        <div>
          <span style="display: block" class="f20">在线咨询</span>
          <div class="t3">日常健康问题咨询</div>
        </div>
      </div>
      <div class="flex flex_vcenter" @click="showActions(2)">
        <i
          class="w-icon w-icon-icon_fzxf"
          :class="{'gray-filter': doctor.returnVisitFlag == 0 && doctor.cloudVisitFlag==0}"
        ></i>
        <div>
          <span style="display: block" class="f20">复诊续方</span>
          <div class="t3">支持在线续方</div>
        </div>
      </div>
    </div>

    <div class="mt10"></div>

    <div>
      <left-border-title :title="'擅长'"></left-border-title>
      <p
        class="textAreaStyle"
        v-if="(doctor.expert && doctor.expert.length > 45) && !showMore"
      >{{(doctor.expert || "暂无") | overText}}</p>
      <p class="textAreaStyle" v-else>{{doctor.expert || "暂无"}}</p>
      <div class="more" v-if="doctor.expert && doctor.expert.length > 45">
        <span v-show="!showMore" @click="showMore = true">全部</span>
        <span v-show="showMore" @click="showMore = false">收起</span>
      </div>
    </div>
    <div class="mt10"></div>

    <div>
      <left-border-title :title="'简介'"></left-border-title>
      <p
        class="textAreaStyle"
        v-if="(doctor.briefIntroduction && doctor.briefIntroduction.length > 45) && !showMore2"
      >{{(doctor.briefIntroduction || "暂无") | overText}}</p>
      <p class="textAreaStyle" v-else>{{doctor.briefIntroduction || "暂无"}}</p>
      <div class="more" v-if="doctor.briefIntroduction && doctor.briefIntroduction.length > 45">
        <span v-show="!showMore2" @click="showMore2 = true">全部</span>
        <span v-show="showMore2" @click="showMore2 = false">收起</span>
      </div>
    </div>
    <div class="mt10"></div>
    <div>
      <left-border-title :title="'患者评价'">
        <div slot="rightHandler">
          <span class="moreBtn" @click="goMoreJudge()">
            查看更多评价
            <i class="iconfont icon-small-arrow-right t3" />
          </span>
        </div>
      </left-border-title>
    </div>
    <div class="labelList">
      <ul class="flex wrap listUl">
        <li v-for="(value, index) in labelList" :key="index">{{value.title}}({{value.count}})</li>
      </ul>
      <mu-divider inset style="margin:0 10px;width: auto" />
      <ul>
        <li v-for="(value, index) in personJudgeList" :key="index">
          <div class="detailTitle flex">
            <div class="user">
              <img src="../../assets/images/icon_mzfy_user.png" alt />
              <span>{{value.patientName.slice(0,1)}}**</span>
            </div>
            <rate :size="18" :score="parseInt(value.score/2)" :readonly="true"></rate>
            <span class="flex_full timeText">{{value.evaluateTime}}</span>
          </div>
          <div class="detailLables">
            <ul class="flex wrap">
              <li
                v-for="(value1, index1) in personJudgeList[index].labelList"
                :key="index1"
              >{{value1.title}}</li>
            </ul>
          </div>
          <div class="detailContent">{{value.content}}</div>
          <mu-divider inset style="margin:0 10px;width: auto" />
        </li>
      </ul>
    </div>

    <!-- 在线咨询对话框 -->
    <BsPopup :show="showAction1">
      <section class="action-wrap">
        <div class="action-close">
          <i class="w-icon w-icon-icon_common_close" @click="showAction1=false"></i>
        </div>
        <div class="action-title">请选择咨询方式</div>
        <ul class="action-list">
          <li @click="toNext(doctor.imageAbleFlag, 'imageAbleFlag')">
            <div class="action-icon">
              <i
                class="w-icon w-icon-ysxq_icon_twzx"
                :class="doctor.imageAbleFlag == 1?'':'gray-filter'"
              ></i>
            </div>
            <div class="action-content">
              <div class="action-sub-title">图文咨询</div>
              <div class="action-desc">
                <div>
                  通过
                  <span class="t1">文字、图片</span>与医生交流
                </div>
                <div>
                  医生不定时回复，限时
                  <span class="t1">25</span>小时
                </div>
              </div>
            </div>
            <div class="action-right" @click.stop="showAppointPlan = !showAppointPlan" v-if="schedulingModeType == 1 && !finalResult">
              <span class="t5">接诊计划</span>
              <i class="iconfont icon-small-arrow-right t3" />
            </div>
            <div class="action-right" v-else>
              <div v-if="doctor.imageAbleFlag == 1">
                <div class="t5">{{doctor.imageAbleFee}}元/次</div>
                <div class="t3 f12 middle-line">{{doctor.imageAblePrimitiveFee}}元/次</div>
              </div>
              <div v-else class="t5">暂未开通</div>
              <i class="iconfont icon-small-arrow-right t3" />
            </div>
            
          </li>
          <div v-show="showAppointPlan">
            <AppointPlan  :schedulingList="schedulingList" ref="domSchedule"/>
          </div>
          <li @click="toNext(doctor.telephoneFlag, 'telephoneFlag')">
            <div class="action-icon">
              <i
                class="w-icon w-icon-ysxq_icon_dhzx"
                :class="doctor.telephoneFlag == 1?'':'gray-filter'"
              ></i>
            </div>
            <div class="action-content">
              <div class="action-sub-title">电话咨询</div>
              <div class="action-desc">
                <div>
                  通过
                  <span class="t1">匿名电话</span>与医生交流
                </div>
                <div>
                  指定时间段，限时
                  <span class="t1">15</span>分钟
                </div>
              </div>
            </div>
            <div class="action-right">
              <div v-if="doctor.telephoneFlag == 1">
                <div class="t5">{{doctor.telephoneFee}}元/次</div>
                <div class="t3 f12 middle-line">{{doctor.telephonePrimitiveFee}}元/次</div>
              </div>
              <div v-else class="t5">暂未开通</div>

              <i class="iconfont icon-small-arrow-right t3" />
            </div>
          </li>
          <li @click="toNext(doctor.videoFlag,'videoFlag')">
            <div class="action-icon">
              <i
                class="w-icon w-icon-ysxq_icon_spzx"
                :class="doctor.videoFlag == 1?'':'gray-filter'"
              ></i>
            </div>
            <div class="action-content">
              <div class="action-sub-title">视频咨询</div>
              <div class="action-desc">
                <div>
                  通过
                  <span class="t1">手机视频</span>与医生交流
                </div>
                <div>
                  指定时间段，限时
                  <span class="t1">15</span>分钟
                </div>
              </div>
            </div>
            <div class="action-right">
              <div>
                <div class="t5">{{doctor.videoFee}}元/次</div>
                <div class="t3 f12 middle-line">{{doctor.videoPrimitiveFee}}元/次</div>
              </div>

              <i class="iconfont icon-small-arrow-right t3" />
            </div>
          </li>
        </ul>
      </section>
    </BsPopup>

    <!-- 复诊续方对话框 -->
    <BsPopup :show="showAction2">
      <section class="action-wrap">
        <div class="action-close">
          <i class="w-icon w-icon-icon_common_close" @click="showAction2=false"></i>
        </div>
        <div class="action-title">请选择复诊方式</div>
        <ul class="action-list">
          <li @click="toNextMedical(doctor.returnVisitFlag, 'returnVisit')">
            <div class="action-icon">
              <i
                class="w-icon w-icon-ysxq_icon_fzpy"
                :class="{'gray-filter': doctor.returnVisitFlag == 0}"
              ></i>
            </div>
            <div class="action-content">
              <div class="action-sub-title">复诊配药</div>
              <div class="action-desc">
                <div>
                  通过
                  <span class="t1">匿名电话</span>与医生交流
                </div>
                <div>仅限本院初诊患者，支持在线续方</div>
              </div>
            </div>
            <div class="action-right">
              <div v-if="doctor.returnVisitFlag == 1">
                <div class="t5">{{doctor.returnVisitFee}}元/次</div>
                <div class="t3 f12 middle-line">{{doctor.returnVisitPrimitiveFee}}元/次</div>
              </div>
              <div v-else class="t5">尚未开通</div>

              <i class="iconfont icon-small-arrow-right t3" />
            </div>
          </li>
          <li @click="toNext(doctor.cloudVisitFlag, 'cloudVisit')">
            <div class="action-icon">
              <i
                class="w-icon w-icon-ysxq_icon_yzs"
                :class="{'gray-filter': doctor.cloudVisitFlag == 0}"
              ></i>
            </div>
            <div class="action-content">
              <div class="action-sub-title">云诊室</div>
              <div class="action-desc">
                <div>
                  通过
                  <span class="t1">手机视频</span>与医生交流
                </div>
                <div>
                  指定时间段，每次约
                  <span class="t1">15</span>分钟
                </div>
                <div>支持在线续方</div>
              </div>
            </div>
            <div class="action-right">
              <div v-if="doctor.cloudVisitFlag == 1">
                <div class="t5">{{doctor.cloudVisitFee}}元/次</div>
                <div class="t3 f12 middle-line">{{doctor.cloudVisitPrimitiveFee}}元/次</div>
              </div>
              <div v-else class="t5">尚未开通</div>

              <i class="iconfont icon-small-arrow-right t3" />
            </div>
          </li>
        </ul>
      </section>
    </BsPopup>
  </div>
</template>

<script>
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import BsPopup from "../../components/BsPopup.vue";
import rate from "../../components/BsRate.vue";
import AppointPlan from "./AppointPlan";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
import { formatDate } from '../../common/js/util';
export default {
  data() {
    return {
      hospitalCode: sessionStorage.getItem("hospitalCode") || "",
      param: {
        consultType: "",
        deptCode: "",
        doctorLevelName: "",
        orderByType: "",
        type: 2,
        doctorId: "",
        deptId: ""
      },
      doctor: {
        query: {},
        medical: {}
      },
      doctorCode: "",
      doctorId: "",
      labelList: [],
      personJudgeList: [],
      showMore: false,
      showMore2: false,
      showAction1: false,
      showAction2: false,
      showAppointPlan: false,
      // 排班相关
      schedulingModeType: '',
      schedulingList: [],
      finalResult: false

    };
  },
  components: {
    leftBorderTitle,
    rate,
    BsPopup,
    AppointPlan
  },
  filters: {
    overText(val) {
      if (val.length > 45) {
        return val.substr(0, 45) + "……";
      } else {
        return val;
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.param.doctorId = this.$route.query.docid;
      this.param.deptId = this.$route.query.departmentId;
      commonAjaxJson(RESTFUL_API.queryConsultDetail, this.param, true).then(
        res => {
          if (res) {
            this.doctorCode = res.data.data.doctorCode || "";
            this.doctorId = res.data.data.doctorId || "";
            this.doctor = res.data.data || {};

            this.queryJudgeList();
            this.queryPersonJudgeList();

            // 查询图文咨询的排班
            this.querySchedule()

            // var barr = (res.data.data && res.data.data.doctorBuses) || [];
            // this.doctor.query = barr.find(item => {
            //   return item.busCode == "imageAble";
            // });
            // this.doctor.query = this.doctor.query || {};
            // this.doctor.query.feeTxt = this._tranFunc(this.doctor.query) || "";

            // this.doctor.medical = barr.find(item => {
            //   return item.busCode == "returnVisit";
            // });
            // this.doctor.medical = this.doctor.medical || {};
            // this.doctor.medical.feeTxt = this._tranFunc(this.doctor.medical) || "";
          }
        }
      );
    },


    showActions(n) {
      if (n == 1) {
        this.showAction1 = true;
      } else {
        this.showAction2 = true;
      }
    },

    // 下一步问诊
    toNext(flag, s) {
      // 没有开通
      if (flag == 0) {
        return;
      }

      // 单独处理图文咨询
      // 1、不支持排班，直接走下一步
      // 2、支持排班，当前时间段没有排班，弹出问诊计划，终止。当前时间段有排班，直接下一步
      if (this.schedulingModeType == 1 && s == 'imageAble'){
        let currentTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        this.finalResult =  this.schedulingList.some(v => (v.startTime <= currentTime && v.endTime >= currentTime))
        if (!this.finalResult){
          this.showAppointPlan = true
          return
        }
      }

      this.$store.commit("UPDATE_PAGEDATA", this.doctor);
      sessionStorage.setItem("doctorPageData", JSON.stringify(this.doctor));
      this.$router.push(`/queryOnline/queryByImg?pageAction=${s}`);
    },

    // 下一步复诊
    toNextMedical(flag, s) {
      if (flag == 0) {
        return;
      }
      this.$router.push({ path: "/medicalAgain/index", query: this.doctor });
    },

    // 查询图文咨询的排班
    querySchedule() {
      // querySchedulingListByDoctorId
      let pageData = this.$store.state.pageData;
      let param = {
        departmentId: this.param.deptId,
        doctorId: this.param.doctorId,
        schedulingType: 1, // 1 图文咨询
        organizationId: 1
      };

      commonAjaxJson(RESTFUL_API.querySchedulingListByDoctorId, param, true).then(
        res => {
          const { code, data, message = "", schedulingModeType } = res.data;
          if (code == 200) {
            this.schedulingModeType = data.schedulingModeType // 0 未开通排班
            this.schedulingList = data.schedulingList
            // 初始化排班表
            // if (data.schedulingModeType == 1 && data.schedulingList.length > 0) {
            //   this.$refs.domSchedule.init()
            // }
          }
        }
      );
    },

    // 去全部评价
    goMoreJudge() {
      this.$router.push({
        path: "/queryOnline/judgeList",
        query: {
          templateIdArr: "1,3",
          doctorCode: this.doctorCode,
          doctorId: this.doctorId
        }
      });
    },

    // 评价列表
    queryJudgeList() {
      let param = {
        templateIdArr: "1,3",
        doctorCode: this.doctorCode,
        doctorId: this.doctorId
      };
      commonAjaxJson(RESTFUL_API.queryJudgeLabelList, param, true).then(res => {
        if (res.data.code == 1 || res.data.code == 200) {
          this.labelList = res.data.data;
        }
      });
    },

    // 查询个人评价
    queryPersonJudgeList() {
      let param = {
        templateIdArr: "1,3",
        doctorCode: this.doctorCode,
        doctorId: this.doctorId,
        pageNo: 1,
        pageSize: 2
      };
      commonAjaxJson(RESTFUL_API.queryPersonJudgeList, param, true).then(
        res => {
          if (res.data.code == 1 || res.data.code == 200) {
            this.personJudgeList = res.data.data;
          }
        }
      );
    },

    collectDoctor() {
      let isCollect = this.doctor.doctorCollect;
      let requestUrl = "",
        param = {};
      if (isCollect === 2) {
        requestUrl = "addDoctorCollect";
        param = {
          hospitalCode: this.hospitalCode,
          doctorId: this.doctor.doctorId,
          doctorCode: this.doctor.doctorCode,
          departmentCode: this.doctor.departmentCode,
          // doctorHeadPortrait: this.doctor.headerUrl,
          departmentName: this.doctor.departmentName,
          // doctorTitle: this.doctor.doctorTitle,
          doctorLevel: this.doctor.doctorLevel | "",
          doctorName: this.doctor.doctorName,
          collectSources: 1
        };
      } else {
        requestUrl = "cancelDoctorCollect";
        param = {
          hospitalCode: this.hospitalCode,
          collectId: this.doctor.doctorCollectId
        };
      }
      commonAjaxJson(RESTFUL_API[requestUrl], param, true).then(res => {
        if (res.data.code === 200) {
          if (isCollect == 1) {
            this.doctor.doctorCollect = 2;
            this.$store.commit("UPDATE_TOAST", {
              message: "已取消收藏!"
            });
          } else {
            this.$store.commit("UPDATE_TOAST", {
              message: "收藏成功!"
            });
            this.doctor.doctorCollect = 1;
          }
          if (res.data.data.collectId)
            this.doctor.doctorCollectId = res.data.data.collectId;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";
.mt5 {
  margin-top: 5px;
}
.origin_price {
  color: #ccc;
  font-size: 12px;
  text-decoration: line-through;
}
.rateInfo {
  color: white;
  margin: 10px 10px 0 10px;
  // border-top: 1px solid white;
  padding-top: 5px;
}
.labelList {
  background-color: white;
  .listUl > li {
    background-color: #e9f8f0;
    color: #7e7e7e;
    border-radius: 14px;
    height: 28px;
    line-height: 28px;
    width: 110px;
    text-align: center;
    margin: 5px;
    box-sizing: border-box;
  }
  .detailTitle {
    padding: 8px 10px;
    .timeText {
      text-align: right;
      color: #7e7e7e;
    }
    .user {
      margin-right: 10px;
      img {
        width: 20px;
        vertical-align: bottom;
      }
    }
  }
  .detailLables {
    margin: 0 10px;
    li {
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      background-color: #f2f2f2;
      color: #a5a5a5;
      margin: 0 5px 5px 0;
    }
  }
  .detailContent {
    padding: 10px;
  }
}
.moreBtn {
  color: #7e7e7e;
  margin-right: 10px;
}
.infinite-container {
  .borderBtn {
    font-size: 12px;
    padding: 1px 8px;
    color: #d2fbeb;
    border-color: #d2fbeb;
  }
}
.color-lightgreen {
  color: #d2fbeb;
}

.feeText,
.feeText14 {
  display: block;
}
.feeText14 {
  color: #ff6600;
}
.topBg {
  height: 140px;
  background: url("../../assets/wzjl/bg_mine_zxwz_ysxq.png") no-repeat top
    center/100% 100%;
  color: white;
  position: relative;
  img {
    width: 80px;
    height: 80px;
    margin: 0 10px;
  }
  .collect_wrap {
    position: absolute;
    right: 10px;
    top: 5px;
    // margin-right: 10px;
    color: #333;
    background-color: #fff;
    border-radius: 14px;
    padding: 2px 6px;
    img {
      width: 12px;
      height: 12px;
      margin: 0 2px 0 0;
      vertical-align: middle;
    }
  }
  .docName {
    font-size: 1.2em;
    color: #fff;
  }
  .ostatus {
    width: 42px;
    height: 21px;
    position: absolute;
    font-size: 10px;
    color: #fff;
    text-align: center;
    top: 0px;
    right: 80px;
    background: url("../../assets/wzjl/tab_zxwz_zx_ysxq.png") no-repeat center
      center/100% 100%;
  }
}

.borderBtn {
  color: white;
  border-color: white;
  background-color: transparent;
}

.topIconBox {
  background-color: white;
  padding: 26px 0;
  position: relative;
  overflow: hidden;

  > div {
    float: left;
    width: 50%;
    padding-left: 14px;
  }
}

.icon {
  width: 50px;
  height: 50px;
  background-image: url("../../assets/images/indexPageIcons.png");
  display: block;
}
.flex_vcenter {
  > i {
    margin-right: 10px;
  }
}
.yyghIcon {
  background-position: -80px -10px;
}

.fzpyIcon {
  background-position: -10px -10px;
}

.textAreaStyle {
  background-color: white;
  padding: 10px 10px;
}
.more {
  text-align: center;
  color: #999;
  background-color: #fff;
  padding: 0 0 10px;
}
.action-wrap {
  position: relative;
  padding: 0;
  .action-close {
    position: absolute;
    top: -40px;
    right: 20px;
    z-index: 99999;
  }
  .action-title {
    text-align: center;
    font-size: 20px;
    padding: 14px;
    border-bottom: 1px solid #f2f2f2;
  }
  .action-list {
    li {
      border-bottom: 1px solid #f2f2f2;
      padding: 14px 10px;
      display: flex;
      justify-content: space-around;
      .action-icon {
        flex: 0 0 60px;
        display: flex;
        align-items: center;
      }
      .action-content {
        flex: 1;
      }
      .action-sub-title {
        font-size: 1.2em;
        margin-top: 4px;
      }
      .action-desc {
        font-size: 0.95em;
        color: #999;
      }
      .action-right {
        display: flex;
        align-items: center;
        text-align: center;
      }
      .middle-line {
        text-decoration: line-through;
      }
    }
  }
}
</style>
